<template>
	<view class="page-container profile-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="个人信息" @clickLeft="goBack" />
		<!-- 基础用法，不包含校验规则 -->
		<uni-forms ref="baseForm" :modelValue="baseFormData" class='baseForm'>	
			<view>
				<view class="idBg">
					<image
						v-if='imgPath && isUpload '
						:src="imgPath" alt="" 
						class="idcard-img" 
						mode="aspectFill"
					></image>
					<!-- <image
						:src="baseFormData.idImg" alt="" 
						class="idcard-img" 
						mode="aspectFill"
					></image> -->
					<image
						v-if='!isUpload'
						:src="card.url1" alt="" 
						class="idcard-img" 
						mode="aspectFill"
					></image>
				</view>
				<view class="upload">
					<view class="upload-btn">
						<view class="upload-btn-text bg-primary-600">上传身份证人脸照</view>
						<view name="file" class="upload-file" @click="changeImg('idImg')"></view>
					</view>
				</view>
			</view>
			<view class="bg-white fs_15 content">
				<!-- <view class="profile-cell  d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="身份证照片">
						<text class="text-grey-700 fs_15 idImg" slot="label">身份证</text>
						<view class="picker_card" v-model="baseFormData.idImg">					 
						   <image class="image avatar ml-auto" :src="baseFormData.idImg" mode="aspectFill" @click="changeImg('idImg')"></image>
						</view>
					</uni-forms-item>
				</view> -->
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="姓名" name="name">
						<text class="text-grey-700 fs_15" slot="label">姓名</text>
						<uni-easyinput 
							v-model="baseFormData.name" 
							:clearable="false" 
							:inputBorder="false" 
							placeholder="请填写姓名"
							:disabled="!isUpload"
						/>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="性别" name="gender">
						<text class="text-grey-700 fs_15" slot="label">性别</text>
						<uni-data-select 
							v-model="baseFormData.gender" 
							:clear="false" 
							:localdata="sexs"
							placeholder="请选择性别"
							@change="sexChange"
							:disabled="!isUpload"
						>
						</uni-data-select>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="民族" name="nation">
						<text class="text-grey-700 fs_15" slot="label">民族</text>
						<view class="d-flex align-items-center">
							<uni-easyinput 
								v-model="baseFormData.nation" 
								:clearable="false" 
								:inputBorder="false" 
								placeholder="请填写民族" 
								class="w-100"
								:disabled="!isUpload"
							/>
						</view>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="出生日期" name="birthDate" class='birthDate'>
						<text class="text-grey-700 fs_15" slot="label">出生日期</text>
						<picker 
							class="pickerDate" 
							mode="date" 
							:disabled="!isUpload"
							:value="baseFormData.birthDate" 
							:start="startDate" 
							:end="endDate" 
							@change="bindDateChange"
						>
							<view @click="bindDateChange" class="cbirthDate">{{ date }}</view>
						</picker>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="身份证" name="idNumber">
						<text class="text-grey-700 fs_15" slot="label">身份证号</text>
						<view class="d-flex align-items-center">
							<uni-easyinput 
								v-model="baseFormData.idNumber" 
								:clearable="false" 
								:inputBorder="false" 
								placeholder="请填写身份证号" 
								class="w-100"
								:disabled="!isUpload"
							/>
						</view>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="地址" name="familyAddress">
						<text class="text-grey-700 fs_15" slot="label">地址</text>
						<view class="d-flex align-items-center">
							<uni-easyinput 
								v-model="baseFormData.familyAddress" 
								:clearable="false" 
								:inputBorder="false" 
								placeholder="请填写地址" 
								class="w-100"
								:disabled="!isUpload"
							/>
						</view>
					</uni-forms-item>
				</view>
				
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="手机" name="phone">
						<text class="text-grey-700 fs_15" slot="label">手机</text>
						<view class="d-flex align-items-center">
							<uni-easyinput 
								v-model="baseFormData.phone" 
								:clearable="false" 
								:inputBorder="false" 
								placeholder="请填写手机号" 
								class="w-100"
								:disabled="!isUpload"
							/>
						</view>
					</uni-forms-item>
				</view>
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="蓝底照片" name="blueImg">
						<text class="text-grey-700 fs_15" slot="label">蓝底照片</text>
						<view class="picker_card" v-model="baseFormData.blueImg">					 
						   <image class="image avatar ml-auto" :src="baseFormData.blueImg" mode="aspectFill" @click="changeImg('blueImg')"></image>
						</view>
					</uni-forms-item>
				</view> -->
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="学历" name="educationalLevel">
						<text class="text-grey-700 fs_15" slot="label">学历</text>
						<uni-data-select
							v-model="baseFormData.educationalLevel" 
							:clear="false" 
							:localdata="educationalLeveles"
							placeholder="请选择学历"
							@change="educationalLevelChange">
						</uni-data-select>
					</uni-forms-item>
				</view> -->
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="县" name="county">
						<text class="text-grey-700 fs_15" slot="label">县</text>
						<view class="d-flex align-items-center">
							<uni-easyinput v-model="baseFormData.county" :clearable="false" :inputBorder="false" placeholder="请填写县" class="w-100"/>
						</view>
					</uni-forms-item>
				</view> -->
				
				
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="婚姻情况" name="maritalStatus">
						<text class="text-grey-700 fs_15" slot="label">婚姻情况</text>
							<uni-data-select
								v-model="baseFormData.maritalStatus" 
								:clear="false" 
								:localdata="maritalList"
								placeholder="请填写婚否"
								@change="maritalChange">
							</uni-data-select>
					</uni-forms-item>
				</view> -->
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="政治面貌" name="politicalAffiliation">
						<text class="text-grey-700 fs_15" slot="label">政治面貌</text>
						<view class="d-flex align-items-center">
							<uni-easyinput v-model="baseFormData.politicalAffiliation" :clearable="false" :inputBorder="false" placeholder="请填写政治面貌" class="w-100"/>
						</view>
					</uni-forms-item>
				</view> -->
				
				<!-- <view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="邮政编码" name="postalCode">
						<text class="text-grey-700 fs_15" slot="label">邮政编码</text>
						<view class="d-flex align-items-center">
							<uni-easyinput v-model="baseFormData.postalCode" :clearable="false" :inputBorder="false" placeholder="请填写邮政编码" class="w-100"/>
						</view>
					</uni-forms-item>
				</view> -->
				
				<!-- <view v-if='isShow' class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="登记日期" name="birthDate">
						<text class="text-grey-700 fs_15" slot="label">登记日期</text>
						<uni-datetime-picker 
							type="date" 
							return-type="timestamp" 
							v-model="baseFormData.recordDate" 
							:border="false"
							:clear-icon="false"
							placeholder="请选择登记日期"
						/>
					</uni-forms-item>
				</view> -->
			</view>
			<view class="content-wrap">
				<view class="content">
					<view class="skill">
						<view class="title">
							<text>期望职位</text>
							<image class="icon" @click="typeShow(1)" src='../../../static/my/icon_edit.png'></image>
						</view>
						<view class="value" v-if='show1'>
							{{textarea1 ? textarea1 : '暂无'}} 
						</view>
						<view v-else class="uni-textarea">
							<textarea 
								class="con" 
								v-model="textarea1" 
								:maxlength="200"  
								placeholder="期望职位"
							/>
						</view>
					</view>
					<view class="skill">
						<view class="title">
							<text>期望工作地点</text>
							<image class="icon" @click="typeShow(2)" src='../../../static/my/icon_edit.png'></image>
						</view>
						<view class="value" v-if='show2'>
							{{textarea2 ? textarea2 : '暂无'}} 
						</view>
						<view v-else class="uni-textarea">
							<textarea 
								class="con" 
								:maxlength="200"  
								v-model="textarea2" 
								placeholder="期望工作地点" 
							/>
						</view>
					</view>
				</view>
			</view>
		</uni-forms>
		
		<!-- 保存 -->
		<view class="p-btn save">
			<view class="my-btn bg-primary-600 px-2 py-3 fs_16" type="primary" size="mini" @click="submit('baseForm')">保存</view>
		</view>
	</view>
</template>

<script>
	// import txAPI from '@/common/imgOrTxtTest.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				// date: currentDate,
				date: '请填写出生日期',
				avatarImg:"",
				baseFormData:{
					age: '',
					birthDate: '',
					blueImg: require("@/static/idBg.png"),
					county: '',
					gender: '',
					educationalLevel: '',
					familyAddress: '',
					idImg: require("@/static/idBg.png"),
					idNumber: '',
					maritalStatus: '',
					name:"",
					nation: '',
					phone: '',
					politicalAffiliation: '',
					postalCode: '',
					recordDate: ''
				},
				sexs:[
					{
						text: '男',
						value: '1'
					}, {
						text: '女',
						value: '0'
					}],
					maritalList:[{
						text: '已婚',
						value: '1'
					}, {
						text: '未婚',
						value: '0'
					},
				],
				educationalLeveles:[
					{
						text: '大专及以下',
						value: '0'
					}, 
					{
						text: '普本',
						value: '1'
					},
					{
						text: '双一流',
						value: '2'
					},
					{
						text: '硕士研究生',
						value: '3'
					},
					{
						text: '博士研究生',
						value: '4'
					}
				],
				isShow: false,
				show1: true,
				show2: true,
				textarea1: '',
				textarea2: '',
				card: {
					url1: require("@/static/idBg.png")
				},
				imgPath: '',
				imgFile: null,
				imgFilePaths: null,
				isUpload: false,
				isRecode: false
			}
		},
		onLoad(option){
			this.user_token = uni.getStorageSync('user_token');
			if(this.user_token) this.getProfileInfo(this.user_token);
			// this.isGoback = option.isGoback;
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取用户信息
			getProfileInfo(token){
				this.$api.profileInfo().then(res=>{
					if(res.code == 200){
						this.baseFormData.name = res.data.name;
						this.baseFormData.gender = res.data.gender;
						this.baseFormData.phone = res.data.phone;
						this.baseFormData.age = res.data.age;
						this.baseFormData.familyAddress = res.data.familyAddress;
						this.baseFormData.idImg = res.data.idImg;
						this.baseFormData.idNumber = res.data.idNumber;
						this.baseFormData.nation = res.data.nation;
						this.textarea1 = res.data.desiredDutyStation;
						this.textarea2 = res.data.desiredPosition;
						// this.baseFormData.county = res.data.county;
						// this.baseFormData.politicalAffiliation = res.data.politicalAffiliation;
						// this.baseFormData.postalCode = res.data.postalCode;
						// this.baseFormData.educationalLevel = res.data.educationalLevel;
						// this.baseFormData.maritalStatus = res.data.maritalStatus;
						// this.baseFormData.blueImg = res.data.blueImg || require("@/static/upload.png");
						if(this.baseFormData.idNumber) {
							this.isRecode = true;
						}
						if(this.baseFormData.idImg) {
							this.isUpload = true;
						}
						setTimeout(() => {
							this.baseFormData.birthDate = res.data.birthDate;
							if(this.baseFormData.birthDate) {
								this.date = this.changeDate(this.baseFormData.birthDate);
							} else {
								this.date = '请填写出生日期';
							}
							// this.date = this.changeDate(this.baseFormData.birthDate);
							this.isShow = true;
						},500);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			
			// 修改图片
			changeImg(pathName){
				var _this = this;
				this.imgFile = null;
				this.imgFilePaths = null;
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						try {
							uni.showLoading({
								title: "上传中...",
								mask: true,
							});
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							const tempFiles = chooseImageRes.tempFiles[0];
							this.imgFile = tempFiles;
							this.imgFilePaths = tempFilePaths;
							this.tempToBase64(tempFiles)
								.then(res => {
									_this.isUpload = true;
									_this.imgPath = res;
									_this.identifyIdCard(res);
								}).catch(err => {
									console.log('err', err);
								});
							
						}catch (e) {
							console.log(e);
						} finally {
							uni.hideLoading();
						}
					}
				});
			},
			
			// 上传方法
			upload(dataName,path,file) {   
				return new Promise((resolve,reject) => {
					var _this = this;
					var COS = require('cos-wx-sdk-v5');
					var cos = new COS({
						SecretId: this.$globalUrl.COSParams.SecretId,
						SecretKey: this.$globalUrl.COSParams.SecretKey
					});
					// _this.Fun.loading("正在上传");// 此处替换为你自己的加载提示方法
					let fileName = file.path.substr(file.path.lastIndexOf('/') + 1);
					cos.postObject({
							Bucket: this.$globalUrl.COSParams.Bucket, // 你的储存桶
							Region: this.$globalUrl.COSParams.Region,// 你的储存区域
							Key: '/info/'+ fileName,
							FilePath: path,
							// Body: file
							onProgress: function (info) {
								// console.log("[cos.postObject-seccess]",JSON.stringify(info));
							}
						},
						function(err, data) {
							if (err == null) {
								resolve('https://' + data.Location)
								
							} else {
								// _this.Fun.tip("上传失败");// 此处替换为你自己的提示方法
								console.log('err',err)
								reject(err)
							}
						}
					)
				})
			},
			
			// 性别切换
			sexChange(val){
				if(!this.isUpload) return false;
				this.baseFormData.gender = val;
			},
			// 性别切换
			maritalChange(val){
				this.baseFormData.maritalStatus = val;
			},
			// 学历切换
			educationalLevelChange(val){
				this.baseFormData.educationalLevel = val;
			},
			// 提交保存
			async submit(ref){
				try{
					uni.showToast({
						title: '加载中……',
						icon: 'loading',
						duration: 3000,
					})
					let _value = this.baseFormData.phone;
					let regExp = new RegExp("^1[356789]\\d{9}$");
					if(!_value) {
						uni.showToast({
							title: '请填写手机号',
							icon: 'none'
						});
						return 
					}
					if (!regExp.test(_value)) {
						uni.showToast({
							title: '请填写正确的手机号',
							icon: 'none'
						});
						return 
					} 
					let imgPath;
					if(this.imgFilePaths && this.imgFile) {
						imgPath = await this.upload('idImg',this.imgFilePaths,this.imgFile);
						// imgPath = imgPath.replace('https://h2w-1256690844.cos.ap-beijing.myqcloud.com','http://cdn.h2w.sm6.top');
					} else {
						imgPath = this.baseFormData.idImg;
					}
					
					this.baseFormData.age = this.mymethod(this.baseFormData.birthDate);
					let timeStamp;
					if(this.baseFormData.birthDate) {
						if( typeof (this.baseFormData.birthDate) == 'string') {
							timeStamp = Date.parse(this.baseFormData.birthDate);
						} else {
							timeStamp = this.baseFormData.birthDate
						}
					} else {
						timeStamp = 0;
					}
					let params = {
						age: this.baseFormData.age,
						name: this.baseFormData.name,
						gender: this.baseFormData.gender,
						phone: this.baseFormData.phone,
						birthDate: timeStamp,
						familyAddress: this.baseFormData.familyAddress,
						idImg: imgPath,
						idNumber: this.baseFormData.idNumber,
						nation: this.baseFormData.nation,
						desiredDutyStation: this.textarea1,
						desiredPosition: this.textarea2,
						
						// recordDate: this.baseFormData.recordDate,
						// county: this.baseFormData.county,
						// educationalLevel: this.baseFormData.educationalLevel,
						// blueImg: this.baseFormData.blueImg,
						// maritalStatus: this.baseFormData.maritalStatus,
						// politicalAffiliation: this.baseFormData.politicalAffiliation,
						// postalCode: this.baseFormData.postalCode,
					};
					if(!params.name) {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						});
						return 
					} 
					if(!params.gender) {
						uni.showToast({
							title: '请输入性别',
							icon: 'none'
						});
						return 
					}
					if(!params.birthDate) {
						uni.showToast({
							title: '请输入出生日期',
							icon: 'none'
						});
						return 
					}
					if(!params.nation) {
						uni.showToast({
							title: '请输入民族',
							icon: 'none'
						});
						return 
					}
					if(!params.idNumber) {
						uni.showToast({
							title: '请输入身份证号码',
							icon: 'none'
						});
						return 
					}
					if(!params.familyAddress) {
						uni.showToast({
							title: '请输入家庭地址',
							icon: 'none'
						});
						return 
					}
					if(!params.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return 
					}
					if(!params.desiredDutyStation) {
						uni.showToast({
							title: '请输入期望职位',
							icon: 'none'
						});
						return 
					}
					if(!params.desiredPosition) {
						uni.showToast({
							title: '请输入期望工作地点',
							icon: 'none'
						});
						return 
					}
					let res = await this.$api.saveProfileInfo(params)
					if(res.code == 200){
						uni.hideToast();
						uni.showToast({
							title: '保存成功'
						});
						this.getProfileInfo(this.user_token);
						setTimeout(()=>{
							uni.navigateBack({
								success: () => {
									let page = getCurrentPages().pop();  //跳转页面成功之后
									if (!page) {
										return;
									} else {
										page.onLoad(page.options);// page自带options对象.
									}
								}
							})
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}catch(e){
					//TODO handle the exception
					console.log('error', e);
					uni.hideToast();
				}
			},
			mymethod(time){
				let birthday = this.changeDate(time);
				//根据日期算年龄
				if(birthday){
				  birthday=birthday.split('-');
				  // 新建日期对象
				  let date = new Date();
				  // 今天日期，数组，同 birthday
				  let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
				  // 分别计算年月日差值
				  let age = today.map((val, index) => {
					  return val - birthday[index]
				  })
				  // 当天数为负数时，月减 1，天数加上月总天数
				  if (age[2] < 0) {
					  // 简单获取上个月总天数的方法，不会错
					  let lastMonth = new Date(today[0], today[1], 0)
					  age[1]--
					  age[2] += lastMonth.getDate()
				  }
				  // 当月数为负数时，年减 1，月数加上 12
				  if (age[1] < 0) {
					  age[0]--
					  age[1] += 12
				  }
				  return age[0];
				}
			},
			changeDate(time) {
				var date = new Date(time);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				return Y + M + D;
			},
			// 选择时间 日期
			bindDateChange: function(e) {
				this.baseFormData.birthDate = new Date(e.detail.value).getTime();
				this.date = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
		
				if (type === 'start') {
					year = year - 80;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			typeShow(type) {
				if(type === 1) {
					this.show1 =! this.show1;
				} else if(type === 2) {
					this.show2 =! this.show2;
				} 
			},
			
			// 图片转base64
			tempToBase64(tempFiles) {
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: tempFiles.path,
						encoding: 'base64',
						success: (res) => {
							// 避免获取不到文件类型
							if (!tempFiles.type) {
								uni.getImageInfo({
									src: tempFiles.path,
									success: (image) => {
										// 拼接成完整的base64
										resolve(`data:image/${image.type};base64,${res.data}`)
									},
									fail: (err) => {
										reject(err)
									}
								});
							} 
							// 拼接成完整的base64
							else resolve(`data:${tempFiles.type};base64,${res.data}`)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			/**
			* 识别身份证
			*/
			identifyIdCard(str) {
				//  调用api获取识别结果
				let params = {
					imageBase64: '',
					imageUrl: str
				}
				this.$api.IdentificationCard(params).then((res)=>{
					if(res.code === 200) {
						const {name,sex,nation,birth,address,idNUm} = res.data;
						let birthStr = birth && birth.replace(/\//g,"-");
						this.baseFormData.name = name;
						if(birthStr) {
							this.baseFormData.birthDate = birthStr;
							this.date = birthStr;
						} else {
							this.date = '请填写出生日期';
						}
						if(sex) {
							this.baseFormData.gender = sex === '男' ? '1' : '0';
						}
						this.baseFormData.familyAddress = address;
						this.baseFormData.idNumber = idNUm;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			// 获取新图片地址
			async getNewImgPath(path) {
				try{
					const res = await this.$api.getImgPath(path);
				}catch(e){
					//TODO handle the exception
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
uni-page-body{
	height: 100%;
}
.baseForm{
	.content{
		padding-bottom: 10rpx;
	}
}
.idImg{
	width: 200rpx;
}
.save{
	z-index: 10;
}
.pickerDate{
	display: flex;
	align-items: center;
}
.birthDate{
	/deep/ .uni-forms-item__content{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
.cbirthDate{
	font-size: 32rpx;
	color: var(--grey-150);
}
.content-wrap{
	border-top: 2rpx solid var(--grey-25);
	padding: 10rpx 30rpx 200rpx;
	background: #fff;
}
.content{
	.skill{
		hegiht:auto;
		margin-bottom: 20rpx;
		.title{
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 34rpx;
			font-weight: 600;
			.icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.value{
			font-size: 30rpx;
			line-height: 40rpx;
		}
		.uni-textarea{
			height: 200rpx;
			border: 2rpx solid var(--grey-25);
			border-radius: 5rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			overflow: hidden;
			.con{
			  width:100%;
			  hegiht:auto;
			  padding: 20rpx 10rpx;
			  box-sizing: border-box;
			}
		}
	}
}
.idBg{
	padding: 30rpx 30rpx 0;
}
.idcard-img {
	width: 100%;
	height: 12rem;
}
.upload {
  height: 2.5rem;
  padding-bottom: 1rem;
  .upload-btn {
    position: relative;
    top: 0.5rem;
    height: 2rem;
    text-align: center;
    padding: 0;
  }
  
  .upload-btn-text {
    display: block;
    position: absolute;
    left: 30%;
    padding: 0;
    width: 40%;
    height: 2rem;
    line-height: 2rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #fff;
    // background-image: linear-gradient(270deg, #3F86FE 0%, #64ADF6 99%);
    // background-image: linear-gradient(270deg, #3F86FE 0%, #64ADF6 99%);
    border: none !important;
  }
  
  
  .upload-file {
    display: block;
    position: absolute;
    left: 30%;
    padding: 0;
    width: 40%;
    height: 2rem;
    line-height: 2rem;
    border-radius: 4px;
    padding: 0;
    opacity: 0;
    border: none !important;
  }
}


</style>
